<template>
  <view v-if="data" class="allbox">
    <!-- id=43986 -->
    <!-- 商品轮播图 -->
    <swiper class="swiper" circular indicator-dots autoplay>
      <swiper-item
        @click="previewImage(item.pics_big)"
        v-for="(item,index) in pics"
        :key="item.pics_id"
      >
        <image :src="item.pics_big" mode="aspectFit" />
      </swiper-item>
    </swiper>
    <!-- 价格 -->
    <view class="price">￥{{data.goods_price}}</view>
    <view class="box">
      <view class="title">{{data.goods_name}}</view>
      <view class="icon" @click="like">
        <view
          :class="['iconfont',likeFlag?'icon-lujing':'icon-shoucang']"
          :style="{color:likeFlag?'#fc2d47':''}"
        ></view>
        <view class="like">收藏</view>
      </view>
    </view>
    <!-- 详情 -->
    <view class="detail">
      <view class="detail_title">商品详情</view>
      <rich-text :nodes="data.textNodes"></rich-text>
    </view>
    <!-- 底部 -->
    <view class="floor">
      <view class="f_box">
        <view class="item">
          <text class="iconfont icon-kefu-zuizhong-"></text>
          <text>客服</text>
          <button open-type="contact">客服</button>
        </view>
        <view class="item">
          <text class="iconfont icon-fenxiang"></text>
          <text>分享</text>
          <button open-type="share">分享</button>
        </view>
        <navigator url="/pages/cart/index" class="item" open-type="switchTab">
          <text class="iconfont icon-qicheqianlian-"></text>
          <text>购物车</text>
          <view class="cartNum">{{length}}</view>
        </navigator>
        <view class="item" @click="swipershow">加入购物车</view>
        <view class="item">立即购买</view>
      </view>
      <view class="height" v-if="iphoneFlag"></view>
    </view>
    <!-- 回到顶部开始 -->
    <view v-show="flag" class="top" @click="backtop">
      <image src="../../static/top.png" mode="widthFix" />
    </view>
    <!-- 回到顶部结束 -->
    <!-- 弹出层 -->
    <uni-popup ref="popup" type="bottom">
      <view class="popup" >
        <image :src="pics[0].pics_big" mode />
        <view class="popupbox">
          <view>购买数量</view>
          <view class="num">
            <button class="btn" :disabled="num===1?true:false" @click="sub">-</button>
            <view class="numbox">{{num}}</view>
            <button class="btn" @click="add">+</button>
          </view>
        </view>
        <view @click="sure" class="sure">确定</view>
        <view class="height" v-if="iphoneFlag"></view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
import { uniPopup, uniPopupMessage, uniPopupDialog } from '@dcloudio/uni-ui'
export default {
  components: {
    uniPopup,
    uniPopupMessage,
    uniPopupDialog,
  },
  async onLoad(options) {
    this.goods_id = options.id || 491
    this.getData()
    this.getLength()
    const res = await uni.getSystemInfoSync()
    console.log(res)
    if (res.model.includes('iPhone X')||res.model.includes('iPhone 11')) {
      this.iphoneFlag = true
    }
  },
  data() {
    return {
      goods_id: '',
      pics: [],
      data: null,
      flag: false,
      likeFlag: false,
      num: 1,
      length: 0,
      iphoneFlag: false,
    }
  },
  // 页面滚动触发
  onPageScroll(e) {
    if (e.scrollTop > 100) {
      if (this.flag) return
      this.flag = true
    } else {
      if (!this.flag) return
      this.flag = false
    }
  },
  methods: {
    // 获取数据
    getData() {
      this.request({
        url: '/goods/detail',
        data: {
          goods_id: this.goods_id,
        },
      }).then((res) => {
        console.log(res)
        this.data = res
        this.data.textNodes = this.data.goods_introduce.replace(
          /\.webp/g,
          '.jpg'
        )
        this.pics = res.pics
        // 判断是否收藏了
        const goodsList = uni.getStorageSync('goodsList') || []
        if (goodsList.length) {
          const index = goodsList.findIndex(
            (x) => x.goods_id === this.data.goods_id
          )
          if (index != -1) {
            this.likeFlag = true
          }
        }
      })
    },
    // 收藏
    like() {
      this.likeFlag = !this.likeFlag
      if (this.likeFlag) {
        uni.showToast({
          title: '收藏成功',
          icon: 'none',
        })
        // 保存到本地
        const goodsList = uni.getStorageSync('goodsList') || []
        goodsList.push({ ...this.data, likeFlag: this.likeFlag })
        uni.setStorageSync('goodsList', goodsList)
      } else {
        uni.showToast({
          title: '取消收藏',
          icon: 'none',
        })
        const goodsList = uni.getStorageSync('goodsList')
        const index = goodsList.findIndex(
          (x) => x.goods_id == this.data.goods_id
        )
        goodsList.splice(index, 1)
        uni.setStorageSync('goodsList', goodsList)
      }
    },
    // 图片预览
    previewImage(url) {
      const urls = this.pics.map((v) => v.pics_big)
      wx.previewImage({
        current: url, // 当前显示图片的http链接
        urls, // 需要预览的图片http链接列表
      })
    },
    // 回到顶部
    backtop() {
      // 回到顶部
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 500,
      })
    },
    // 购物车滑块的显示
    swipershow() {
      this.$refs.popup.open()
      this.swipershowFlag = true
    },
    sub() {
      this.num--
    },
    add() {
      this.num++
    },
    sure() {
      const cart = uni.getStorageSync('cart') || []
      const index = cart.findIndex((x) => {
        if (x.goods_id == this.data.goods_id) {
          x.count += this.num
        }
        return x.goods_id == this.data.goods_id
      })
      if (index === -1) {
        cart.push({
          ...this.data,
          count: this.num,
          checked: true,
        })
      }
      uni.setStorageSync('cart', cart)
      this.$refs.popup.close()
      uni.showToast({
        title: '加入成功',
      })
      this.getLength()
    },
    getLength() {
      let length = 0
      const cart = uni.getStorageSync('cart') || []
      cart.forEach((x) => {
        length += x.count
      })
      this.length = length
    },
  },
}
</script>
<style lang="scss">
.allbox {
  padding-bottom: 152rpx;
}
.swiper {
  min-height: 68vw;
  swiper-item {
    padding: 20rpx;
    image {
      height: 100%;
      width: 100%;
    }
  }
}
.price {
  font-size: 42rpx;
  color: $theme-color;
  margin: 20rpx 0;
}

.box {
  display: flex;
  padding: 0 20rpx;
  .title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .icon {
    margin-left: 40rpx;
    width: 130rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-left: 1px solid #ddd;

    .like {
      font-size: 24rpx;
    }
  }
}
.detail {
  padding: 0 20rpx;
  .detail_title {
    color: $theme-color;
    font-size: 38rpx;
    font-weight: 600;
    margin: 20rpx 0;
  }
}
.floor {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;

  background: #fff;
  .f_box {
    width: 100%;
    display: flex;
    height: 90rpx;
  }

  button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
  .item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 10rpx 0;
    position: relative;
    .cartNum {
      position: absolute;
      padding: 0 10rpx;
      color: #fff;
      border-radius: 20rpx;
      top: -12rpx;
      right: 10rpx;
      background: $theme-color;
      font-size: 20rpx;
    }
    &:nth-last-child(-n + 2) {
      flex: 2;
      padding: 0;
      background: orange;
      color: #fff;
      font-weight: 600;
      &:last-child {
        background: $theme-color;
      }
    }
    .iconfont {
      font-size: 40rpx;
    }
  }
}
.top {
  position: fixed;
  bottom: 190rpx;
  right: 40rpx;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.popup {
  height: 352rpx;
  width: 100%;
  background: #fff;
  position: relative;
  padding: 0 50rpx;
  .height{
    position: absolute;
    width: 100%;
    height:70rpx;
    background:#fff;
    bottom:-70rpx;
    left:0;
  }
  image {
    width: 200rpx;
    height: 200rpx;
    // padding:20rpx;
    // background:#fff;
    border: 2rpx solid #000;
    /* position: absolute;
    left:50rpx;
    top:-50rpx; */
    transform: translateY(-50rpx);
    border-radius: 10rpx;
  }
  .popupbox {
    display: flex;
    justify-content: space-between;
    .num {
      display: flex;
      view {
        background: #f7f7f7;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60rpx;
      }
      .btn {
        width: 60rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        padding: 0;
      }
      .numbox {
        flex: 1;
        margin: 0 5rpx;
        color: #000;
        padding: 0 30rpx;
      }
    }
  }
  .sure {
    height: 60rpx;
    width: 100%;
    background: $theme-color;
    text-align: center;
    color: #fff;
    line-height: 60rpx;
    border-radius: 10rpx;
    margin-top: 20rpx;
  }
}
.height {
  background: #fff;
  height: 70rpx;
}
</style>